@import url(comment.less);

// 头部导航栏
.navbar {
    transition: all .3s;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    .container {
        margin: 0;
        padding: 0.5rem 1.5rem;
        width: 100%;
    }
    .navbar-brand {
        padding: 0 1rem;
    }
    
    .navbar-nav {
        .nav-link{
            font-weight: 600;
            font-size: 17px;
                a:hover{
                    color: #3499df !important;
                }
        }
        
        .dropdown-toggle {
            font-weight: 600;
            font-size: 17px;
            &:hover {
                color: #3499df;
            }
        }
        
        .dropdown-menu {
            padding: 0.5rem 0;
            border-radius: 0.3rem;
            border: 1px solid #e6e6e6;
            box-shadow: 0 0 0 black;
            a {
                font-weight: 700;
                font-size: 18px;
                margin-bottom: 0.5rem;
            }
            a:hover{
                color: #3499df !important;
                background-color: rgba(0, 0, 0, 0);
            }
        }
    }
    
}

// 第一部分
.hero {
    background-image: url(../img/cluvio-geo-pattern.svg);
    padding-top: 4rem;
    padding-bottom: 4rem; 
    .heroText {
        h1 {
            font-size: 2rem;
            @media screen and (max-width:376px){
                font-size: 3rem;
                text-align: center;
            }
        }
        
        div {
            margin: 2rem 0;
            border-left: 8px solid #ffd146;
            padding-left: 1rem;
            @media screen and (max-width:376px){
                border:none;
                padding:0;
                p {
                    font-size: 1.5rem;
                    line-height: 3.4rem;
                }
            }   
        }
        
        p {
             @media screen and (max-width:376px){
                 text-align: center;
             }
        } 
        
    }
    
    .heroImg {
        @media screen and (max-width:376px){
            margin-top: 5rem;
        }
    }
}


// 技术支持
.support {
    // margin: 2rem 0;
    // padding: 2rem 0;
    border-top: 1px dashed #b5c4d7;
    border-bottom: 1px dashed #b5c4d7;
    .supportThings {
        height: 4rem;
        justify-content: space-around;
    }
}

// 选择理由
.choose {
   // margin-bottom: 8rem;
   .card {
       @media screen and (max-width:376px){
            // line-height: 1.7rem;
       } 
   }
}

// 优秀人才
.talent {
    padding-top: 2rem;
    padding-bottom: 2rem;
    background-color: #eff9ff;
    .card {
        margin-top: 4rem;
        background-color: #fff;
        padding: 3rem 1rem;
        @media screen and (max-width:376px){
           display: block;
           h3 {
               line-height: 2rem;
               text-align: center;
           }
           .talentTips {
               font-size: 1.5rem;
               margin-top: 2rem;
               line-height: 2rem;
               text-align: center;
           }
        }
        .cardImg{
            overflow: hidden;
            border-radius: 50%;
            margin-top: -7rem;
            border: 0.5rem solid #eff9ff;
            @media screen and (max-width:376px){
               height: 20rem;
               width: 20rem;
               margin-top: -7rem;
               margin-left: auto;
               margin-right: auto;
               border: 1rem solid #eff9ff;
            }
        }
        
    }
}


// 热销产品
.hot {
    .card{
        margin: 0 0.5rem;
        border-top-left-radius: 0px;
        border-top-right-radius: 2rem;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 2rem;
        padding: 1.5rem;
        h1 {
            color: #d1181a;
            font-size: 2rem;   
        }
        .col-xs-12 {
            font-weight: 600;
        }
        @media screen and (max-width:376px){
            display: block;
            h1 {
                margin-left: 1rem;
                font-size: 5rem; 
            }
            h3 {
                margin-bottom: 1rem;
            }
            .col-xs-12 {
                font-size: 1.2rem;
                margin-top: 2rem;
            }
        }
        
    }
}


// 订购步骤
.order {
    padding: 2rem;
    background-color: #eff9ff;
    .card {
        display: block;
        width: 100%;
        background-color: #fff;
        padding: 1.7rem;
        div {
            word-break:break-all;
            margin: 0.5rem 0;
            strong {
                color: #d1181a;
                font-size: 0.8rem;
                @media screen and (max-width:376px){
                    font-size: 1.5rem;
                }
            }
        }
    }
}


// 点单
.orders {
    padding: 2rem 0;
    .ordersTips {
        font-size: 0.7rem;
        @media screen and (max-width:376px){
            font-size: 1.5rem;
        }
    }
    .ordersBtn {
        display: flex;
        justify-content: center;
    }
    .ordersTel {
        margin-top: 1rem;
        font-size: 0.7rem;
        @media screen and (max-width:376px){
            font-size: 1.5rem;
        }
    }
}

// 底部栏
.footer {
    padding: 2rem;
    // background-color: #ffd146;
    background-image: linear-gradient(135deg,#ffd146,#ff8742);
    .footerLogo {
        width:  10rem;
    }
    .nav2 {
        a {
            font-size: 0.9rem;
            color: #d1181a; 
            margin-bottom: 2rem;
            &:hover {
                color: #f11b1f;
                text-decoration: none;
            }
            @media screen and (max-width:376px){
                font-size: 1.9rem;
            }
        }
        strong {
            border-bottom: 5px solid #ff6a00;
        }
    }
    .mt2 {
        font-weight: 600;
    }
    .nav3 {
        .supportThank {
            font-weight: 600;
            margin-bottom: 1rem;
            font-size: 0.9rem;
            color: #d1181a;
            @media screen and (max-width:376px){
                margin-top: 4rem;
                margin-bottom: 2rem;
                font-size: 1.9rem;
            }
        }
        .mb1 {
            font-size: 0.7rem;
            color: #d1181a; 
            width: 4rem;
        }
        .supportName {
            font-weight: 600;
            font-style: italic;
            font-size: 0.8rem;
            margin-left: 0.3rem;
        }
    }
    .segmentation {
        height: 2px;
        background-color: #d1181a;
    }
    @media screen and (max-width:376px){
        .col-md-5 {
            display: none;
        }
    }
}



